<template>
  <div class="organizationInfo">
    <div class="title">裁判员信息</div>
    <div class="line"></div>
    <div class="orgInfos">
      <div class="orgInfo">
        <div class="input-suffix">
          <i class="red_color" v-if="flag">*</i>
          <span>裁判姓名：</span>
          <el-input placeholder="请输入" suffix-icon="el-icon-edit el-input__icon" v-model="orgInfo.name" clearable size="small"
            style="width: 200px;">
          </el-input>
        </div>
        <div class="input-suffix">
          <i class="red_color" v-if="flag">*</i>
          <span>证件类型：</span>
          <el-select v-model="orgInfo.card_type" placeholder="请选择" size="small" style="width: 100px;">
            <el-option v-for="item in actions" :key="item.type" :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="orgInfo">
        <div class="input-suffix">
          <i class="red_color" v-if="flag">*</i>
          <span>证件号码：</span>
          <el-input placeholder="请输入" suffix-icon="el-icon-edit el-input__icon" v-model="orgInfo.id_card" clearable
            size="small" style="width: 200px;">
          </el-input>
        </div>
        <div class="input-suffix">
          <span>学历：</span>
          <el-select v-model="orgInfo.education" placeholder="请选择" size="small" style="width: 100px;">
            <el-option v-for="item in educationActions" :key="item.name" :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="orgInfo">
        <div class="input-suffix">
          <i class="red_color" v-if="flag">*</i>
          <span>裁判级别：</span>
          <el-select v-model="orgInfo.ref_grade" placeholder="请选择" size="small" style="width: 200px;">
            <el-option v-for="item in ref_gradeActions" :key="item.name" :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </div>
        <div class="input-suffix">
          <span>民族：</span>
          <el-input placeholder="请输入" suffix-icon="el-icon-edit el-input__icon" v-model="orgInfo.nation" clearable size="small"
            style="width: 100px;">
          </el-input>
        </div>
      </div>

      <div class="input-suffix"  v-if="flag">
          <span>所在省市：</span>
          <el-input placeholder="请输入" suffix-icon="el-icon-edit el-input__icon" v-model="orgInfo.province" clearable
            size="small" style="width: 200px;">
          </el-input>
        </div>

      <p class="info" v-else>
        <span>所在省市：{{orgInfo.province}}</span>
      </p>
      <div class="input-suffix">
         <i class="red_color" v-if="flag">*</i>
        <span>电话号码：</span>
        <el-input placeholder="请输入" suffix-icon="el-icon-edit el-input__icon" v-model="orgInfo.phone" clearable size="small"
          style="width: 200px;">
        </el-input>
      </div>
      <div class="input-suffix">
        <i class="red_color" v-if="flag">*</i>
        <span>电子邮箱：</span>
        <el-input placeholder="请输入" suffix-icon="el-icon-edit el-input__icon" v-model="orgInfo.email" clearable size="small"
          style="width: 200px;">
        </el-input>
      </div>
      <div class="input-suffix">
        <span>工作单位：</span>
        <el-input placeholder="请输入" suffix-icon="el-icon-edit el-input__icon" v-model="orgInfo.address" clearable size="small"
          style="width: 400px;">
        </el-input>
      </div>
      <p class="prove">
        <span>资质证明：</span>
        <el-upload class="avatar-uploader" :on-preview="handlePictureCardPreview" :action="actionFile" :show-file-list="true"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"  v-if="flag">
          <div @mouseenter="enter" @mouseleave="leave">
            <img :src="orgInfo.prove" class="avatar"> 
            <i v-if="previewIcon && orgInfo.prove" style="font-size: 28px;position: absolute;top: 50%;margin-top: -14px;z-index: 1;"
              class="el-icon-zoom-in" @click.stop="preview"></i>
          </div>
        </el-upload>

        <el-upload class="avatar-uploader" :on-preview="handlePictureCardPreview" :action="actionFile" :show-file-list="true"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" v-else >
          <div @mouseenter="enter" @mouseleave="leave">
            <img v-if="orgInfo.prove" :src="orgInfo.prove" class="avatar">
            <i v-if="previewIcon && orgInfo.prove" style="font-size: 28px;position: absolute;top: 50%;margin-top: -14px;z-index: 1;"
              class="el-icon-zoom-in" @click.stop="preview"></i>
          </div>
        </el-upload>
      </p>
    </div>
    <div class="line" style="margin-left: 70px"></div>
    <div style="text-align: center;margin-top: 64px">
      <el-button type="primary" @click="upSubmit" style="margin-right: 20px;">提交</el-button>
      <el-button type="info" @click="goBack">返回</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="orgInfo.prove" alt="" v-if="orgInfo.prove != '' || orgInfo.prove != null">
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        addreferee:"",
        flag:false,
        orgInfo: {
          name:"",
          card_type:"",
          id_card:"",
          education:"",
          ref_grade:"",
          nation:"",
          email:"",
          address: "",
          prove:"",
          phone:"",
          province:""
        },
        dialogVisible: false,
        previewIcon: false,
        actions: [{
            name: '身份证',
            type: 0
          },
          {
            name: '护照',
            type: 1
          },
        ],
        educationActions: [{
          name: '专科',
          type: 0,
        }, {
          name: '本科',
          type: 1,
        }, {
          name: '硕士',
          type: 2,
        }, {
          name: '博士',
          type: 3,
        }],
        ref_gradeActions: [{
          name: '国际级',
          type: 0,
        }, {
          name: '国家级',
          type: 1,
        }, {
          name: '一级',
          type: 2,
        }, {
          name: '二级',
          type: 3,
        }, {
          name: '三级',
          type: 4,
        }]
      }
    },
    created() {
      this.getClubInfo()
      if(this.$route.query.addreferee){
        this.flag = !this.flag
      }
    },
    computed: {
      actionFile() {
        return `${this.$axios.defaults.baseURL}/event/file`
      }
    },
    methods: {
      enter() {
        this.previewIcon = true
      },
      leave() {
        this.previewIcon = false
      },
      handlePictureCardPreview(file) {
        this.orgInfo.prove = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        this.orgInfo.prove = res.data
      },
      beforeAvatarUpload(file) {
        console.log(file.type)
        const isJPG = file.type
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!/^image\/(jpeg|png|jpg|bmp|gif|jpg)$/.test(isJPG)) {
          this.$message.error('上传头像图片格式不正确!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      upSubmit(){
        if(this.flag){
          this.addReferee()
        }else{
          this.refInfoSubmit()
        }
      },
      addReferee(){
        console.log(this.orgInfo);
        if(this.orgInfo.name==""||this.orgInfo.phone==""||this.orgInfo.id_card==""||this.orgInfo.email==""||this.orgInfo.ref_grade==""){
           this.$message.error('请填写完整信息');
           return
        }
        let rel = /^1(3|4|5|6|7|8|9)\d{9}$/; 
        if(!rel.test(this.orgInfo.phone)){
          this.$message.error('请填写正确的电话号码');
          return
        }
        // var reg = /^(\d{18,18}|\d{15,15}|\d{17,17}X)$/;
        // if (!reg.test(this.id_card)) {
          // this.$message.error('请填写正确的证件号码');
        // }
         this.$axios.post('/UserManage/add_ref', {
            user_id: this.$route.query.userId,
            name: this.orgInfo.name,
            card_type: this.orgInfo.card_type,
            id_card: this.orgInfo.id_card,
            education: this.orgInfo.education,
            ref_grade: this.orgInfo.ref_grade,
            nation: this.orgInfo.nation,
            email: this.orgInfo.email,
            address: this.orgInfo.address,
            prove: this.orgInfo.prove,
            phone:this.orgInfo.phone,
            province:this.orgInfo.province
          }, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(reserve=>{
            if(reserve.data.code == 2000){
                this.$message({
                message: reserve.data.msg,
                type: 'success'
              });
            }else{
              this.$message.error(reserve.data.msg);
            }
            console.log(reserve);
          })
           .catch(err => {
            console.log(err)
          });
      },
      refInfoSubmit() {
        this.$axios.post('/UserManage/edit_ref_info', {
            user_id: this.$route.query.userId,
            name: this.orgInfo.name,
            card_type: this.orgInfo.card_type,
            id_card: this.orgInfo.id_card,
            education: this.orgInfo.education,
            ref_grade: this.orgInfo.ref_grade,
            nation: this.orgInfo.nation,
            email: this.orgInfo.email,
            address: this.orgInfo.address,
            prove: this.orgInfo.prove,
          }, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(res => {
            if (res.data.code == 2000) {
              this.$message({
                type: 'success',
                message: res.data.msg
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          })
          .catch(error => {
            console.log(error)
          });
      },
      checked() {
        console.log(this.orgInfo)
      },
      getClubInfo() {
        this.$axios.post('/UserManage/ref_info', {
            user_id: this.$route.query.umpireListId,
          }, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(res => {
            if (res.data.code == 2000) {
              this.orgInfo = res.data.data
            }
          })
          .catch(error => {
            console.log(error)
          });
      },
      goBack() {
        // console.log(this.orgInfo);
        this.$router.go(-1)
      },
      preview() {
        this.dialogVisible = true;
      }
    }
  }
</script>
<style lang="less" scoped>
.red_color{
  color: red;
  line-height: 15px;
  font-size: 16px;
}
  .organizationInfo {
    margin-bottom: 60px;
  }

  .avatar-uploader {
    position: relative;
  }

  .input-suffix {
    margin-bottom: 30px;
  }

  .prove {
    display: flex;

    img {
      display: inline-block;
      width: 336px;
      height: 215px;
      border: 1px #ccc solid;
      padding: 20px 30px;
      border-radius: 4px;
    }
  }

  .info {
    display: flex;

    textarea {
      height: 100%;
    }
  }

  .title {
    margin-left: 26px;
    margin-bottom: 12px;
    margin-top: 12px;
    font-weight: bold;
  }

  .line {
    width: 80%;
    border-top: 1px #dcdfe6 dotted
  }

  .orgInfos {
    margin-top: 31px;
    margin-left: 70px;
    width: 50%;

    p {
      margin-bottom: 34px;
    }

    .orgInfo {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
